<!-- 合成班累计汇总 -->
<template>
  <div class='total_summary'>
    <Form ref="formValidate" :model="formValidate" :label-width="100">
      <Row :gutter="16">
        <Col span="5">
        <FormItem label="案场筛选：" class="house_search">
          <Select v-model="formValidate.buildingId" class="tree-select" placeholder="请选择案场">
            <Tree ref="treeList" :data="treeList" @on-select-change="treeChange"></Tree>
            <Option :value="item.id" v-for="item in treeOptions" :key="item.id" v-show="false">
              {{item.title}}</Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="5">
        <FormItem label="执行周期：" class="house_search">
          <Select v-model="formValidate.cycle" class="tree-select" placeholder="请选择执行周期"
            @on-change="changeCycle" clear>
            <Option :value="item.id" v-for="item in cycleOptions" :key="item.id">
              {{item.executionCycle}}</Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="7">
        <FormItem label="总执行周期：" v-if="formValidate.cycle">
          <div>
            {{execution.executionAllDays||'-'}}天，剩余{{execution.executionResidueDays||'-'}}天；时间占比（<span
              class="time_than">{{execution.timeThan||'-'}}%</span>）
          </div>
        </FormItem>
        </Col>
        <Col span="7">
        <Row type="flex" justify="end">
          <Button type="primary" @click="exportFun()" v-if="unlocking('0207040101')"
            style="margin-right: 20px" :disabled='tableData.length==0'>导出</Button>
        </Row>
        </Col>
      </Row>
    </Form>
    <div v-if="formValidate.cycle">
      <div class="tabs_total">
        <div class="item_tabs_total" v-for="(item,index) in totalTabs" :key="index">
          <p class="text_line">{{item.targetAndReach}}</p>
          <p class="text_line">{{item.proportion}}</p>
          <p class="text_line">{{item.type}}</p>
        </div>
      </div>
      <dt-tree-grid :columnInfo="columns" :list="tableData" :rowId="rowId"
        v-if="formValidate.cycle"></dt-tree-grid>
    </div>
    <div class="noData_img" v-else>
      <img src="@/assets/images/totalPageNoData.png" alt="">
    </div>
    <!--点击查看周期 月 周的详情数据-->
    <Modal v-model="detailPageFlag" title="合成班打法明细" width="70%" :footer-hide="true"
      class="target-modal">
      <detail-page ref="detailPage"></detail-page>
    </Modal>
  </div>
</template>

<script>
  import columnsAll from './components/columns'
  import totalApi from '@/biz/synthetic/totalSummary'
  import detailPage from './components/detail.vue'
  export default {
    components: { detailPage },
    data() {
      return {
        formValidate: {
          buildingId: '',
          cycle: '',
        },
        treeList: [],
        treeOptions: [],
        cycleOptions: [],
        columns: columnsAll.columns(this),
        tableData: [],
        rowId: 'unique',
        totalTabs: [],
        execution: {
          executionAllDays: '',
          executionResidueDays: '',
          timeThan: '',
        },
        detailPageFlag: false,
      }
    },
    computed: {},
    watch: {},
    methods: {
      //获取部门列表
      getDepartmentList() {
        totalApi.getUserByRole({ qryType: 1 }).then((res) => {
          console.log(res)
          this.treeList = res.treeList
          this.treeOptions = res.treeOptions
        })
      },
      //根据案场获取该案场的执行周期列表
      getExecutionCycle(buildingId) {
        console.log(buildingId)
        this.cycleOptions = []
        this.formValidate.cycle = ''
        if (!buildingId) {
          this.tableData = []
          this.totalTabs = []
          this.execution = {}
          return false
        }
        totalApi.getExecutionCycle({ buildingId }).then((res) => {
          console.log('根据案场获取该案场的执行周期列表', res)
          if (res) {
            this.cycleOptions = res
          }
        })
      },
      treeChange(event) {
        console.log(event, '点击了树结构')
        this.formValidate.buildingId = event[0] ? event[0].orgId : ''
        this.getExecutionCycle(this.formValidate.buildingId)
      },
      //导出
      exportFun() {
        let id = this.formValidate.cycle
        if (!id) {
          this.$Message.error('请选择执行周期')
          return false
        }
        totalApi.accruingListForExcel({ id })
      },
      //执行周期选择
      changeCycle(val) {
        if (!val) {
          this.tableData = []
          this.totalTabs = []
          this.execution = {}
          return false
        }
        this.init(val)
      },
      init(id) {
        totalApi.getAccruing({ id }).then((res) => {
          this.tableData = [res.summaryRe]
          this.totalTabs = res.accruingYieldAndExecuteRes.accruingYieldCommentRes
          this.execution = { ...res.accruingYieldAndExecuteRes }
        })
      },
      //点击查看周期 月 周的详情数据
      checkDetail(data) {
        console.log(data)
        this.detailPageFlag = true
        let detailData = {}
        detailData = { ...data }
        detailData.cycle = this.formValidate.cycle
        this.$refs.detailPage.initData(detailData)
      },
    },
    created() {},
    mounted() {
      this.getDepartmentList()
      // this.init(1)
    },
  }
</script>
<style lang='scss' scoped>
  .total_summary {
    padding: 20px 10px;

    .tabs_total {
      display: flex;
      justify-content: flex-start;
      margin-left: 16px;

      .item_tabs_total {
        border: 1px solid #ccc;
        padding: 15px 30px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        text-align: center;

        .text_line {
          font-size: 16px;
          line-height: 26px;
        }
      }
    }

    .time_than {
      color: red;
    }

    .noData_img {
      width: 50%;
      height: 50%;
      margin: 5% 20%;

      img {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>